<template>
		<view class="wx-container">
			<!--view class="logo"></view-->
			<view class="bg-image">
				<view class="search" style="padding-top: 44rpx" >
					<view class="icon-cart" @click="navigateTo('pages/cart/index')"></view>
					<view class="input" @click="navigateTo('pages/search/index')"></view>
				</view>
				<index-category :columns="columns" />
				<view class="swiper">
					<u-swiper
						:list="banner"
						@click="onClick"
						height="300rpx"
						keyName="mainImg"
						indicator
						indicatorMode="dot"
						radius="20rpx"
						imgMode="scaleToFill"
					></u-swiper>
				</view>
			</view>
			<!--view class="h-60"></view-->
			<view class="index-card">
				<block
					v-for="(item, k) in category"
					:key="'category-'+ k"
				>
					<view class="border"></view>
					<index-card
						:type="item.type"
						:item="item"
					></index-card>
				</block>
			</view>
			<!--view class="index-card">
				<product-scrollbar
					:product="productList"
				></product-scrollbar>
			</view-->
			<u-back-top
				:scroll-top="scrollTop"
				icon="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_top.png"
				:iconStyle="{
					width: '142rpx',
					height: '144rpx'
				}"
				right="40rpx"
				bottom="140rpx"
			></u-back-top>
		</view>
</template>

<script>
	import ProductScrollbar from "@/components/ProductScrollbar"
	import IndexCard from "@/components/IndexCard"
	import IndexCategory from "@/components/IndexCategory"
	import { getIndex, getIndexMore, getVerifyIndex, sysConfigs } from "@/config/api"
	// #ifdef APP-PLUS
	import updata from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	// #endif
	export default {
		components: {
			IndexCard,
			ProductScrollbar,
			IndexCategory
		},
		data() {
			return {
				title: 'Hello',
				show: false,
				info: {},
				token: null,
				name: null,
				banner: [],
				category: [],
				columns: [],
				listQuery: {
					page: 1,
					list_rows: 10,
					categoryId: null
				},
				total: 0,
				productList: [],
				scrollTop: 0
			}
		},
		onLoad(option) {

			// #ifdef APP-PLUS
			updata()
			// #endif
			this.getData()
			//const res = uni.getSystemInfoSync()
			if (option.openId) {
				this.$store.dispatch("user/setMpOpenId", option.openId)
			}
			//this.getProductData()
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
            if (this.total > this.productList.length) {
                this.listQuery.page += 1
                //this.getProductData(true)
            }
    	},
		async onPullDownRefresh() {
			await this.getData()
			//this.listQuery.page = 1
			//await this.getProductData()
			uni.stopPullDownRefresh()
    	},
		methods: {
			onClick(index) {
				const banner = this.banner[index]
				this.navigateTo(banner.wxRoute, banner.params)
			},
			async getData() {
				// #ifdef APP-PLUS
				var platform = plus.os.name
				const config = await sysConfigs({fieldCode: ["iosVerify", "iosVersion"]})
				const version = plus.runtime.version
				if (config.iosVerify=='1' && platform == 'iOS' && version == config.iosVersion) {
					var res = await getVerifyIndex()
				} else {
					var res = await getIndex()
				}
				// #endif

				// #ifndef APP-PLUS
				var res = await getIndex()
				// #endif
				this.banner 	= res.carousel
				this.category 	= res.category
				this.columns 	= res.column
			},
			scrolltolower() {
				console.log("到底啦~")
			},
			async getProductData(more = false) {
				const res = await getIndexMore(this.listQuery)
				if (more) {
					this.productList = [...this.productList, ...res.items]
				} else {
					this.productList = res.items
				}
				this.total = res.total
			},
			navigateTo(url, params = null) {
				if (params) {
					uni.$u.route({
						url,
						params
					})
				}else {
					uni.$u.route(url)
				}
        	}
		},
		 onShareAppMessage() {
			return {
				title: 'ionepin',
				path: '/pages/index/index'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wx-container {
		width: 100%;
		//background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/index-bg.png) no-repeat;
		//background-size: 100% 100%;
		.bg-image {
			background-image: linear-gradient(#EAEDF4, #ffffff);
		}
		.search {
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			align-content: center;
			//margin-bottom: 36rpx;
			.icon-cart {
				background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon-cart.png) no-repeat;
				background-size: 100% 100%;
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
			.input {
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 33rpx;
			}
		}
		.logo {
			width: 164rpx;
			height: 111rpx;
			background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/logo%402x.png) no-repeat center;
			background-size: 100% 100%;
			margin: 62rpx auto 50rpx auto;
		}
		.swiper {
			padding: 0 20rpx;
		}
		.index-card {
			//margin-bottom: 100rpx;
		}
		.bottom {
			//position: fixed;
			bottom: 0;
			width: 100%;
		}
		.border {
			background: #F8F8F8;
			height: 10rpx;
			width: 100%;
		}
	}
</style>
